<template>
    <div class="flex flex-wrap items-center pt-16px">
        <div class="text-14px font-bold mb-12px">用户昵称</div>
        <div class="w-150px mr-12px ml-6px mb-12px">
            <el-input v-model="formData.nickname" placeholder="请输入用户昵称"></el-input>
        </div>
        <div class="text-14px font-bold mb-12px">用户状态</div>
        <div class="w-100px mr-12px ml-6px mb-12px">
            <el-select v-model="formData.status" placeholder="全部">
                <el-option v-for="item in formData.statuses" :label="item.label" :value="item.value">
                    <div></div>
                </el-option>
            </el-select>
        </div>
        <div class="text-14px font-bold mb-12px">关注企业</div>
        <div class="w-100px mr-12px ml-6px mb-12px">
            <el-select v-model="formData.company" placeholder="全部">
                <el-option v-for="item in formData.companys" :label="item.label" :value="item.value">
                    <div></div>
                </el-option>
            </el-select>
        </div>
        <div class="text-14px font-bold mb-12px">时间</div>
        <div class="w-350px mr-12px ml-6px mb-12px">
            <el-date-picker
                v-model="formData.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
            />
        </div>
        <div class="text-14px font-bold mb-12px">有无手机号</div>
        <div class="w-100px mr-12px ml-6px mb-12px">
            <el-select v-model="formData.mobile" placeholder="全部">
                <el-option v-for="item in formData.mobiles" :label="item.label" :value="item.value">
                    <div></div>
                </el-option>
            </el-select>
        </div>
        <div class="text-14px font-bold mb-12px">用户手机号</div>
        <div class="w-150px mr-12px ml-6px mb-12px">
            <el-input v-model="formData.phone" placeholder="请输入用户手机号"></el-input>
        </div>
        <div class="text-14px font-bold mb-12px">授权账号</div>
        <div class="w-150px mr-12px ml-6px mb-12px">
            <el-select v-model="formData.account" placeholder="全部">
                <el-option v-for="item in formData.accounts" :label="item.label" :value="item.value">
                    <div></div>
                </el-option>
            </el-select>
        </div>
        <el-button type="primary" :icon="Search" v-debounce="{ callback: handleSearch, delay: 300 }" class="mb-12px">搜索</el-button>
    </div>
    <div class="pt-6px table-container">
        <el-table :data="state.intentions" :default-sort="{ prop: 'total', order: 'descending' }" class="w-full">
            <el-table-column prop="sort" label="序号" align="center" width="60" />
            <el-table-column prop="name" label="用户" align="center" />
            <el-table-column prop="status" label="状态" align="center" width="100" />
            <el-table-column prop="contact" label="联系方式" align="center" width="150" />
            <el-table-column prop="isFollow" label="是否关注" align="center" width="80" />
            <el-table-column prop="date" label="最近互动" align="center" width="150" />
            <el-table-column prop="account" label="媒体账户" align="center" width="150" />
            <el-table-column label="操作" align="center" width="150">
                <template #default="scope">
                    <el-button type="primary">互动记录</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="pt-26px pl-26px pr-26px pb-26px page-container flex flex-center">
        <el-pagination size="small" background layout="prev, pager, next" :total="50" />
    </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'

const formData = reactive({
    nickname:'',
    status:'',
    statuses:[
        {
            label:'全部',
            value:''
        }
    ],
    company:'',
    companys:[
        {
            label:'全部',
            value:''
        }
    ],
    mobile:'',
    mobiles:[
        {
            label:'全部',
            value:''
        }
    ],
    date:'',
    phone:'',
    account:'',
    accounts:[
        {
            label:'全部',
            value:''
        }
    ]
})

const state = reactive({
    intentions:[
        {
            id:1,
            sort:1,
            name:'张三',
            status:'',
            contact:'',
            isFollow:false,
            date:'',
            account:''
        },
    ]
})

function handleSearch() {

}   
</script>

<style scoped></style>